<template>
  <div class="box">
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="date" label="Date" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="120" />
        <el-table-column prop="address" label="Address" width="600" />
        <el-table-column prop="zip" label="Zip" width="120" />
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
            <el-button link type="primary" size="small">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <gantt :tasks="ganttTasks" :columns="ganttColumns" style="height: 500px;width: 50%"></gantt>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive } from 'vue'
import Gantt from './gantt.vue'

const ganttTasks = reactive({
  data: [
    { id: 1, text: 'Task #1', type:"project", start_date: '2023-07-27', end_date: '2023-07-30', duration: 3, progress: 0.6 },
    { id: 2, text: 'Task #2', start_date: '2023-07-23', end_date: '2023-07-26', duration: 3, progress: 0.4 }
  ]
})
// const ganttColumns = ref([
//   { align: 'center', name: 'text', label: '任务名称', hide: true },
//   { align: 'center', name: 'start_date', label: '开始时间', hide: true }
// ])
const ganttColumns = ref([])

const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
]
</script>


<style lang="scss" scoped>
.box {
  display: flex;
}
.table-box {
  width: 50%;
}
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  height: 40px;
}
</style>